<template>
  <view class="pages" v-if="data">
    <view class="pages-con">
      <view class="delivery">
        <view class="delivery-con">
          <view class="let">
            <image :src="data.avatar" mode="aspectFill"></image>
          </view>
          <view class="con">
            <view class="title">{{ data.real_name }}</view>
            <view class="des"> 同城配送 </view>
          </view>
          <view class="rig" @click="makePhone(data.mobile)">
            <i class="iconfont icon-telephone-out1"></i>
          </view>
        </view>

        <view class="delivery-info">
          <div class="item">
            <view>{{ data.distance }}公里</view>
            <view>总里程</view>
          </div>
          <div class="item">
            <view>{{ data.pass_rate }}</view>
            <view>准时率</view>
          </div>
          <div class="item">
            <view>{{ data.star }}</view>
            <view>满意度</view>
          </div>
        </view>
      </view>

      <view class="tag-con">
        <view class="title">配送员标签</view>
        <view class="tag-list">
          <view
            :class="['item', item.star > 3 ? 'active' : '']"
            v-for="item of data.tags"
          >
            {{ item.tag }} {{ item.num }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  async onLoad(opi) {
    try {
      const res = await this.$allrequest.distribution.riderInfo(
        {
          rider_id: opi.id
        },
        true
      );
      if (!res.code) {
        this.data = res.data.rider_info;
      }
    } catch (error) {
      this.$utils.toast(error);
    }
  },

  methods: {
    makePhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.pages {
  position: relative;
  padding: 26rpx 24rpx 0;
  min-height: 100vh;
  background: #f2f2f2;

  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 330rpx;
    background: #f0250e;
  }

  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 330rpx;
    left: 0;
    width: 100%;
    height: 100rpx;
    background: linear-gradient(180deg, #f0250e 0%, #f2f2f2 100%);
  }
}

.pages-con {
  position: relative;
  z-index: 3;
}

.delivery {
  margin-bottom: 24rpx;
  padding: 30rpx 24rpx;
  background: #fff;
  border-radius: 20rpx;
}

.delivery-con {
  display: flex;
  align-items: center;

  .let {
    image {
      width: 96rpx;
      height: 96rpx;
      border-radius: 32px;
      overflow: hidden;
    }
  }

  .con {
    flex: 1;
    overflow: hidden;
    padding: 0 20rpx;
  }

  .title {
    padding-bottom: 5rpx;
    font-size: 40rpx;
    font-weight: bold;
  }

  .rig {
    text-align: center;
    color: #262626;

    .icon-telephone-out1 {
      font-size: 50rpx;
    }
  }

  .des {
    display: inline-block;
    padding: 2rpx 8rpx;
    border: 2rpx solid #fdf1f0;
    font-size: 20rpx;
    color: #f0250e;
  }
}

.delivery-info {
  display: flex;
  padding-top: 32rpx;
  font-size: 28rpx;
  color: #262626;

  .item {
    position: relative;
    width: 33.33%;
    text-align: center;

    &:last-of-type:after {
      display: none;
    }

    &:after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -27rpx;
      width: 2rpx;
      height: 54rpx;
      background: #f2f2f2;
    }
  }
}

.tag-con {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;

  .title {
    font-size: 28rpx;
    color: #262626;
    font-weight: bold;
  }

  .tag-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 26rpx;
  }

  .item {
    margin: 0 20rpx 20rpx 0;
    font-size: 20rpx;
    padding: 2rpx 8rpx;
    background: #f2f2f2;
    border-radius: 6rpx;
    color: #262626;

    &.active {
      background: #fdf1f0;
      color: #f0250e;
    }
  }
}
</style>
